<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>登录</title>
</head>
<body>

<div class="container">
    <div class="row">
        <form class="form-horizontal login_form">
            <h1 style="margin-top: 50px">NIIT学生管理系统</h1>
            <div class="form-group" style="margin-top: 35px">
                <div class="col-sm-10" style="margin: auto auto">
                    <input name="username" type="text" class="form-control" id="inputUser" placeholder="账号">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-10" style="margin: auto auto">
                    <input name="password" type="password" class="form-control" id="inputPassword" placeholder="密码">
                </div>
            </div>
            <div class="form-group">
                <select name="type" class="col-sm-8" style="margin: auto auto; height: 50px" id="inputState" class="form-control">
                    <option selected value="2">学生</option>
                    <option value="1">老师</option>
                    <option value="0">管理员</option>
                </select>
            </div>

            <div class="form-group" style="margin-top: 35px">
                <div>
                    <button type="button" class="btn btn-primary" id="login_btn">登&nbsp;录</button>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">注&nbsp;册</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">注册</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form-horizontal register_form">
                    <div class="form-group" style="margin-top: 35px">
                        <div class="col-sm-10" style="margin: auto auto">
                            <input name="username" type="text" class="form-control" id="regUserName" placeholder="账号">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-10" style="margin: auto auto">
                            <input name="password" type="password" class="form-control" id="regPassword" placeholder="密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <select name="type" class="col-sm-8" style="margin-left: 80px; height: 50px;" id="regState" class="form-control">
                            <option selected value="2">学生</option>
                            <option value="1">老师</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="reg_commit">注册</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>
<script>

    $("#reg_commit").click(function (){
        if($("#regState").val() === "1"){
            $.ajax({
                url: "${APP_PATH}/getTeacherByName",
                data: {"name": $("#regUserName").val() },
                method: "POST",
                success: function (res){
                    var data = JSON.parse(res)
                    console.log(data)
                    if(data.code === 200){
                        alert("该老师已存在")
                    }else if(data.code === 202){
                        $.ajax({
                            url: "${APP_PATH}/userRegister",
                            method: "POST",
                            data: $(".register_form").serialize(),
                            success: function (json){
                                var res = JSON.parse(json)
                                console.log(res)
                                console.log(res.code)
                                if(res.code === 200){
                                    alert("注册成功")
                                    $("#regUserName").val("")
                                    $("#regPassword").val("")
                                    $("#staticBackdrop").modal('hide')
                                }
                            }
                        })
                    }
                }
            })
        }

        if($("#regState").val() === "2"){

            var pattern=/^\d+$/g
            if(!pattern.test($("#regUserName").val())){
                alert("账号为学号，必须为数字")
                return
            }

            if($("#regUserName").val().length > 10){
                alert("账号长度不可超过10位")
                return;
            }

            $.ajax({
                url: "${APP_PATH}/getStudentById",
                data: {"studentId": $("#regUserName").val() },
                method: "POST",
                success: function (res){
                    var data = JSON.parse(res)
                    console.log(data)
                    if(data.code === 200){
                        alert("该学生已存在")
                    }else if(data.code === 202){
                        $.ajax({
                            url: "${APP_PATH}/userRegister",
                            method: "POST",
                            data: $(".register_form").serialize(),
                            success: function (json){
                                var res = JSON.parse(json)
                                console.log(res)
                                console.log(res.code)
                                if(res.code === 200){
                                    alert("注册成功")
                                    $("#regUserName").val("")
                                    $("#regPassword").val("")
                                    $("#staticBackdrop").modal('hide')
                                }
                            }
                        })
                    }
                }
            })
        }

    })

    // 监听登录按钮
    $("#login_btn").click(function (){
        $.ajax({
            url: "${APP_PATH}/login",
            method: "POST",
            data: $(".login_form").serialize(),
            success: function (json){
                var res = JSON.parse(json)
                console.log(res)
                console.log(res.code)
                if(res.code === 200){
                    alert("登录成功")
                    if(res.extend.type === "0"){
                        window.location.href = "${APP_PATH}/jsp/admin/adminHome.jsp"
                    }
                    if(res.extend.type === "1"){
                        window.location.href = "${APP_PATH}/jsp/teacher/teacherHome.jsp"
                    }
                    if(res.extend.type === "2"){
                        window.location.href = "${APP_PATH}/jsp/student/studentHome.jsp"
                    }
                }else {
                    alert("登录失败")
                }
            }
        })
    })
</script>
<style>
    body{
        background: #2b669a;
    }
    .login_form{
        height: 500px;
        width: 800px;
        margin: 100px auto;
        text-align: center;
        border-radius: 10%;
        background: rgba(255,255,255,0.7);
    }
</style>
